import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

export default function App() {
  // 将state数据解构出来,使用let声明变量,后面state数据会发生改变.并将opacity值设置为1
  let [opacity,setOpacity]= useState(1)
  // 调用useEffect函数,内部设置一个循环定时器,让opacity属性自减,变为0之后,再次赋值为1
  useEffect(()=>{
    const timeInterval= setInterval(()=>{
      opacity = opacity-0.1
      if (opacity<=0) {
        opacity=1
      }
      // 这里使用useState的第二个元素,对第一个元素数据进行操作
      setOpacity(opacity)
    },100)

    // 对定时器时间进行清除
    return ()=>{
      clearInterval(timeInterval)
    }
    // 这里要设置一个空数组,让当前useEffect函数只在初始化的是调用,避免其他useEffect函数当前的产生影响
  },[])

  return (
    <div>
        {/* 给DOM元素设置一个opacity的样式 */}
        <h1 style={{opacity}} >React 也不知道咋说</h1>
    </div>
    
  )
}
